

<template>
  <div class="app">
    <h2>readonly和shallowReadonly</h2>
    <h4>求和sum1: {{ sum1 }}</h4>
    <h4>求和sum2: {{ sum2 }}</h4>
    <button @click="add">sum1+1</button>
    <button @click="add2">sum2+1</button>
    <br><br><br><br>
    <h4>汽车1: {{ car }}</h4>
    <h4>汽车2: {{ car2 }}</h4>
    <button @click="changeBrand">修改品牌2</button>
    <button @click="changeColor">修改颜色2</button>
    <button @click="changeEngiee">修改发动机2</button>
    <button @click="changeCar">修改整个车2</button>
  </div>

</template>

<script setup lang="ts" name="App">
  import { ref, readonly,reactive, shallowReadonly } from 'vue';
  let sum1 = ref(0)
  // readonly 限制所有层次都为只读
  // shallowReadonly 浅层次的只读 后续能修改
  // readonly() ()中必须是响应式的数据
  // sum1变化 sum2也会变化
  //会维护关联关系 sum1变化 sum2也会变化
  let sum2 = readonly(sum1)
  const add = () => {
    sum1.value += 1
  }
  const add2 = () => {
    sum2.value += 1
  }

  let car = reactive({
    brand: '奔驰',
    options: {
      color: '红',
      engiee: 'v8'
    }
  })
  let car2 = readonly(car)
  const changeBrand = () => {
    car2.brand = '大众'
  }

  const changeColor = () => {
    car2.options.color = '黄色'
  }

  const changeEngiee = () => {
    car2.options.engiee = 'v3'
  }

  const changeCar = () => {
    Object.assign(car2, {
      brand: '马自达',
      options: {
        color: '绿',
        engiee: 'vv'
      }
    })
  }
</script>

<style scoped>
.app {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  padding: 20px;
}


</style>
